<template>
  <div>
    <van-nav-bar
      class="bind-title"
      title="取票码绑定"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="page-main">
      <div class="tip">
        您可通过输入取票码查询对应订单及票品信息；取票码为数字码,票品信息一经绑定，不可更改。
      </div>
      <van-search
        v-model="value"
        placeholder="请输入取件码"
        @click-left-icon="handlerClick"
      />
      <div class="form"></div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { ref } from "vue";
export default {
  setup() {
    const value = ref("");
    const onClickLeft = () => history.back();
    const handlerClick = () =>
      Toast("很抱歉，未查询到你的购票信息，请与你的购票渠道联系!");
    return {
      value,
      onClickLeft,
      handlerClick,
    };
  },
  mounted() {
    this.$store.commit("hidden");
  },
  unmounted() {
    this.$store.commit("show");
  },
};
</script>

<style lang="scss" >
.van-nav-bar__title {
  font-size: 18px;
  height: 2.75rem;
  line-height: 2.75rem;
}
.van-nav-bar__content {
  border-bottom: 1px solid #e7e7e7;
}
.van-badge__wrapper {
  font-size: 23px;
}
.van-nav-bar .van-icon {
  color: black;
}
.van-search {
  margin-top: 30px;
  background-color: #fff;
}
.van-search__content {
  background-color: #fff;
}
// .van-search__field .van-field__left-icon{
//     display: none;
// }
.van-field__control {
  font-size: 16px;
}
.page-main {
  font-size: 14px;
  padding: 1.5rem 2rem;
  color: #666;
  line-height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .form {
    border-bottom: 1px solid #ccc;
    input {
      border: none;
      font-size: 1rem;
      padding-top: 4rem;
      padding-bottom: 1rem;
    }
  }
}
</style>